<script src="https://maps.googleapis.com/maps/api/js"></script>
    <script>

 var points = [
  new google.maps.LatLng(14.591470477440716, 120.98047032800287),
  new google.maps.LatLng(14.591470477440716, 120.98047032800287),
  new google.maps.LatLng(14.591470477440716, 120.98047032800287),
  new google.maps.LatLng(14.591470477440716, 120.98047032800287)
];

var markers = [];
var iterator = 0;
var map;

function initialize() {

  // Create an array of styles.
  var styles = [
    {
       stylers: [
        { hue: "#006652" },
        { saturation: -20 }
      ]
    },{
      featureType: "road",
      elementType: "geometry",
      stylers: [
        { lightness: 30 },
        { visibility: "simplified" }
      ]
    },{
      featureType: "road",
      elementType: "labels",
    }
  ];

  // Create a new StyledMapType object, passing it the array of styles,
  // as well as the name to be displayed on the map type control.
  var styledMap = new google.maps.StyledMapType(styles,
    {name: "Styled Map"});

  // Create a map object, and include the MapTypeId to add
  // to the map type control.
 var myLatlng = new google.maps.LatLng(14.586902, 120.98570599999994);
  var mapOptions = {
    zoom: 13,
    center: myLatlng,
    mapTypeControlOptions: {
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
    }
  };

 
  map = new google.maps.Map(document.getElementById('map-canvas'),
          mapOptions);

   //Associate the styled map with the MapTypeId and set it to display.
  map.mapTypes.set('map_style', styledMap);
  map.setMapTypeId('map_style');

loadMap();

}

function loadMap() {

   addMarker();

google.maps.event.addListener(map, 'idle', function() {

    var bounds = map.getBounds();
    var ne = bounds.getNorthEast();
    var sw = bounds.getSouthWest();
    var nw = new google.maps.LatLng(ne.lat(), sw.lng());
    var se = new google.maps.LatLng(sw.lat(), ne.lng());

var mapCoords = [
    new google.maps.LatLng(nw.lat(), nw.lng()),
    new google.maps.LatLng(ne.lat(), ne.lng()),
    new google.maps.LatLng(se.lat(), se.lng()),
    new google.maps.LatLng(sw.lat(), sw.lng()),
  ];

 var mapView = new google.maps.Polygon({
    paths: mapCoords,
  });


  if (google.maps.geometry.poly.containsLocation(points[iterator], mapView)) {
    //codes to add marker where marker's points is within mapView
    document.getElementById("status").value = "Marker is within map";

    } else {


    //codes to delete marker where marker's points is not within mapView
    document.getElementById("status").value = "Marker is not within map";

    }

    document.getElementById("ne").value = ne;
    document.getElementById("sw").value = sw;
    document.getElementById("nw").value = nw;
    document.getElementById("se").value = se;

      });
}

function setAllMap(map) {
  for (var i = 0; i < markers.length; i++) {
    markers[i].setMap(map);
  }
}

// Removes the markers from the map, but keeps them in the array.
function clearMarkers() {
  setAllMap(null);
}

function deleteMarkers() {
  clearMarkers();
  markers = [];
}

function addMarker() {
  var marker = new google.maps.Marker({
    position: points[iterator],
    map: map,
    draggable: false,
    //animation: google.maps.Animation.DROP
  });
  iterator++;
if (iterator == 4){
  iterator = 0;
}
  markers.push(marker);
}
      google.maps.event.addDomListener(window, 'load', initialize);

    </script>

<div class="row" style="">
	<div id="map-canvas" class="medium-4 large-4 column" style="padding:0;height:80vh; margin-top:15px;">
	<!--<div>
	 Status:  <input type="text" id="status" size=40><br><br>
     Map top-left: <input type="text" id="nw" size=40><br>
     Map top-right: <input type="text" id="ne" size=40><br>
     Map bottom-right: <input type="text" id="se" size=40><br>
     Map bottom-left: <input type="text" id="sw" size=40></div>-->
	</div>

	<div class="medium-8 large-8 column" style="padding:2rem;overflow:auto;height:85vh;">
		
		<div class="result-wrapper large-12 column">

			<div class="search-grid large-4 column">
				<div class="search-result large-12 column">
					<div class="search-cover large-12 column" style="background:url(img/cover_photo/2.jpg);background-size:cover;">
						<div class="conbtn large-12 column">
							<a href="" class="tiny radius button">Connect</a>
						</div>
						<div class="opac-search large-12 column">
							<div class="search-name medium-8 large-8 column">
								<h5>Brett Virador</h5>
							</div>
							<div class="search-dp medium-2 large-2 column" style="background:url(img/user_dp/steve.jpg);background-size:cover;">	
							</div>
							<div class="medium-2 large-2 column"></div>
		
						</div>		
					</div>
					<div class="search-extra large-12 column">
						<p><i class="fa fa-map-marker"></i>&nbsp;Manila, Philippines</p>
						<p class="xy"><small>IT Programmer .560 connections</small></p>
					</div>
				</div>
			</div>
			

<!---DUUMMMYYY-->
			<div class="search-grid large-4 column">
				<div class="search-result large-12 column">
					<div class="search-cover large-12 column" style="background:url(img/cover_photo/bg.jpg);background-size:cover;">
						<div class="conbtn large-12 column">
							<a href="#" data-reveal-id="myModal" href="" class="tiny radius button">Connected</a>
						</div>
						<div class="opac-search large-12 column">
							<div class="search-name medium-8 large-8 column">
								<h5>Sha Gray</h5>
							</div>
							<div class="search-dp medium-2 large-2 column" style="background:url(img/user_dp/pro1.jpg);background-size:cover;">	
							</div>
							<div class="medium-2 large-2 column"></div>
		
						</div>		
					</div>
					<div class="search-extra large-12 column">
						<p><i class="fa fa-map-marker"></i>&nbsp;Makati, Philippines</p>
						<p class="xy"><small>Web Analyst .60 connections</small></p>
					</div>
				</div>
			</div>

			<div class="search-grid large-4 column">
				<div class="search-result large-12 column">
					<div class="search-cover large-12 column" style="background:url(img/cover_photo/bg3.jpg);background-size:cover;">
						<div class="conbtn large-12 column">
							<a href="" class="tiny radius button">Connect</a>
						</div>
						<div class="opac-search large-12 column">
							<div class="search-name medium-8 large-8 column">
								<h5>Thomas Aquinas</h5>
							</div>
							<div class="search-dp medium-2 large-2 column" style="background:url(img/user_dp/pro2.jpg);background-size:cover;">	
							</div>
							<div class="medium-2 large-2 column"></div>
		
						</div>		
					</div>
					<div class="search-extra large-12 column">
						<p><i class="fa fa-map-marker"></i>&nbsp;Cagayan De Oro, Philippines</p>
						<p class="xy"><small>Freelance Writer .560 connections</small></p>
					</div>
				</div>
			</div>

			<div class="search-grid large-4 column">
				<div class="search-result large-12 column">
					<div class="search-cover large-12 column" style="background:url(img/cover_photo/bg4.jpg);background-size:cover;">
						<div class="conbtn large-12 column">
							<a href="" class="tiny radius button">Request Sent</a>
						</div>
						<div class="opac-search large-12 column">
							<div class="search-name medium-8 large-8 column">
								<h5>Samuel Rajak</h5>
							</div>
							<div class="search-dp medium-2 large-2 column" style="background:url(img/user_dp/pro3.jpg);background-size:cover;">	
							</div>
							<div class="medium-2 large-2 column"></div>
		
						</div>		
					</div>
					<div class="search-extra large-12 column">
						<p><i class="fa fa-map-marker"></i>&nbsp;Valenzuela, Philippines</p>
						<p class="xy"><small>Web Engineer .330 connections</small></p>
					</div>
				</div>
			</div>

			<div class="search-grid large-4 column">
				<div class="search-result large-12 column">
					<div class="search-cover large-12 column" style="background:url(img/cover_photo/bg.jpg);background-size:cover;">
						<div class="conbtn large-12 column">
							<a href="" class="tiny radius button">Connect</a>
						</div>
						<div class="opac-search large-12 column">
							<div class="search-name medium-8 large-8 column">
								<h5>Lam Nam</h5>
							</div>
							<div class="search-dp medium-2 large-2 column" style="background:url(img/user_dp/micro.jpg);background-size:cover;">	
							</div>
							<div class="medium-2 large-2 column"></div>
		
						</div>		
					</div>
					<div class="search-extra large-12 column">
						<p><i class="fa fa-map-marker"></i>&nbsp;Manila, Philippines</p>
						<p class="xy"><small>IT Programmer .560 connections</small></p>
					</div>
				</div>
			</div>

			<div class="search-grid large-4 column">
				<div class="search-result large-12 column">
					<div class="search-cover large-12 column" style="background:url(img/cover_photo/bg1.jpg);background-size:cover;">
						<div class="conbtn large-12 column">
							<a href="" class="tiny radius button">Connect</a>
						</div>
						<div class="opac-search large-12 column">
							<div class="search-name medium-8 large-8 column">
								<h5>David Lee</h5>
							</div>
							<div class="search-dp medium-2 large-2 column" style="background:url(img/user_dp/freelancer.jpg);background-size:cover;">	
							</div>
							<div class="medium-2 large-2 column"></div>
		
						</div>		
					</div>
					<div class="search-extra large-12 column">
						<p><i class="fa fa-map-marker"></i>&nbsp;Pasay, Philippines</p>
						<p class="xy"><small>IT Programmer .560 connections</small></p>
					</div>
				</div>
			</div>

		</div> 
		<div class="text-center large-12 column">
			<a href="" class="button">Load more</a>
		</div>
		<div class="medium-8 large-8 column" style="padding:2rem;overflow:auto;height:80vh;">
	 Status:  <input type="text" id="status" size=40><br><br>
     Map top-left: <input type="text" id="nw" size=40><br>
     Map top-right: <input type="text" id="ne" size=40><br>
     Map bottom-right: <input type="text" id="se" size=40><br>
     Map bottom-left: <input type="text" id="sw" size=40></div>
	</div>
</div>

<style>
.search-grid:hover {
 	cursor: -moz-zoom-in; 
    cursor: -webkit-zoom-in;
    cursor: zoom-in;	
}

</style>